<template>


    <div class="ygg-input" :class="classes">

        <div class="ygg-input-wrapper">
            <input
                    :value="currentValue"
                    @input="yg_input"
                    :placeholder="placeholder"
                    :type="inputType"/>
        </div>
    </div>

</template>

<script>
    export default {
        name: "ygg-input",
        // inject: ['formItem'],
        props: {
            value: {default: null},
            color: {type: String, default: 'info',},                                    //颜色
            size: {type: String, default: 'default',},                                  //大小
            shape: {type: String, default: 'none',},                                    //形状
            dashed: {type: Boolean,},                                                   //虚线框
            long: {type: Boolean,},                                                     //占满父元素宽度
            prefixIcon: {type: String},                                                 //前置图标
            suffixIcon: {type: String, default: null},                                  //后置图标
            type: {type: String, default: 'line'},     // 样式类型为fill，line，none
            placeholder: {
                type: String, default() {
                    return 'content'
                }
            },                                              //默认占位符
            inputType: {type: String, default: 'text'},                                 //输入框的原生类型，比如txt，button
            required: {type: Boolean},                                                  //是否必输
            regexp: {type: RegExp},                                                     //替换正则表达式
            width: {type: Number | String, default: 200},                               //宽度
            align: {type: String},                                                      //文本对齐方式
            rules: {type: Array | String},                                              //校验规则
            validateOnInit: {type: Boolean},                                              //是否在组件初始化的时候就开始校验
            inputReadonly: {type: Boolean},                                              //输入框是否只读
            hoverDeleteIcon: {type: Boolean, default: true},                            //鼠标悬浮是的删除按钮
            clearOnClickDeleteIcon: {type: Boolean, default: true},                     //是否在点击删除图标的时候，请求内容
            focusOnHover: {type: Boolean},                                              //是否在鼠标悬浮的时候自动获取焦点
            hideClearIcon: {type: Boolean},                                             //是否隐藏清除按钮
            keyboard: {type: Boolean,},                                                 //是否监听键盘事件


        },
        data() {
            return {
                currentValue: this.value,
                isValidate: true,
            }
        },
        computed: {
            classes() {
                return [
                    `ygg-input-${!!this.dashed ? 'line' : this.type}`,
                    `ygg-input-color-${this.color}`,
                    `ygg-input-shape-${this.shape}`,
                    `link-input-size-${this.size}`,
                    {
                        'ygg-input-long': !!this.long,
                        'ygg-input-invalid': !this.isValidate,
                        'ygg-input-dashed': !!this.dashed,
                    }

                ]
            }

        },
        watch: {
            value(val) {
                if (this.currentValue !== val) {
                    this.currentValue = val
                }
            },
            required(val) {
                this.handlerValidate();
                // !!this.formItem && (this.formItem.require = val)

            }

        },
        methods: {
            async yg_input(e) {

                if (this.currentValue == e.target.value) return

                this.currentValue = e.target.value
                this.$emit('input', this.currentValue)

            }
        }
    }
</script>

<style>

</style>
